<template>
  <div class="ani-area">
    <template v-for="(item, index) of urls">
      <img :src="item" :style="index === indedx || 'display: none'" :key="`img-${index}`" />
    </template>
  </div>
</template>

<script>
export default {
  name: "snow",
  props: {
    isAnimation: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      urls: [],
      isPlaying: true,
      indedx: 0,
      fps: 0,
    }
  },
  created() {
    new Array(8).fill(0).forEach((item, index) => {
      // this.urls.push(`/assets/imgs/skiing2/skiing_${PrefixZero(index, 2)}.png`)
      this.urls.push(require(`../assets/snow/snow_${index}.png`))
    })

    // setInterval(() => {
    //   this.indedx++
    //   if (this.indedx === 30) this.indedx = 0

    // }, 50)
    this.startRender()
  },

  methods: {
    render() {
      if (!this.isPlaying) return
      this.fps++
      if (this.fps == 15) {
        this.indedx++
        if (this.indedx === 8) this.indedx = 0
        this.fps = 0
      }
    },
    startRender() {
      const _this = this
      ;(function _loop() {
        _this.render()
        _this.loopnum = requestAnimationFrame(() => {
          _loop()
        })
      })()
    },
    stopRender() {
      cancelAnimationFrame(this.loopnum)
    },
  },
  watch: {
    isAnimation(value) {
      this.isPlaying = value
    },
  },
  destroyed() {
    this.stopRender()
  },
}
</script>

<style lang="scss" scoped>
.ani-area {
  height: 100vh;
  width: 100vw;
  img {
    width: 100%;
    pointer-events: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}
</style>
